<template>
	<view class="gt-tab ">
		<view class="gt-tab-btn">
		<view class="gt-tab-row">
			<view v-if="list.length > 0" v-for="(row,key) in list" :key="key" @click="changeSelected(key,row)" class="gt-tab-item"
				:class="selected == key ?'gt-tab-item-selected':''">
				<text class="iconfont" :class="row.icon || ''"></text>
				<text>{{ row.val || '' }}</text>
			</view>
		</view>
		</view>
		<view class="gt-tab-bottom-line"></view>
	</view>
</template>

<script>
	export default {
		name: 'gt-tab',
		data() {
			return {
				selected: 0
			}
		},
		model: {
			prop: 'template',
			event: 'change'
		},
		props: {
			template: {}
		},
		created() {

		},
		computed:{
			list(){
				let list = [];
				if(this.template.defaultTab){
					list = list.concat(this.template.defaultTab);
				}
				if(this.template.selectList[this.template.tab]){
					list = list.concat(this.template.selectList[this.template.tab]);
				}
				// console.log(list);
				return list;
				
			}
		},
		methods: {
			changeSelected(key,row) {
				this.selected = key;
				let temp = this.template;
				temp.searchFormData[this.template.tab] = row.key;
				this.$emit('change',temp);
				this.$emit('clickBack', {
					type:'search'
				})
			},
		}
	}
</script>

<style lang="scss">


	
</style>
